<template>
  <div>
    <div class="head">头部</div>
    <div class="middle">
      <iframe
      ref="paperIframe"
      class='paper-content'
      :src="paperSrc"
      frameborder="0"
      scrolling="no"
      :style='{ height: iframeHeight}'></iframe>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      iframeHeight: (document.body.clientHeight || window.screen.height) - 150 + 'px'
    }
  },
  computed: {
    paperSrc () {
      return 'https://view.czbanbantong.com/xview/d/v1/wow/static/e3691da4f5cbb71bf6d84fd5218c4fcdb139f943/index.html?uniqueId=11575a'
    }
  },
  methods: {
    handleClick () {

    }
  },
  beforeDestroy () {
    document.removeEventListener('click', this.handleClick, false)
  },
  created () {
    document.addEventListener('click', this.handleClick, false)
  }
}
</script>

<style lang="scss">
.head{
  width: 100%;
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 20px;
  border: 1px dashed #f00;
}
.middle{
  width: 100%;
  .paper-content{
    width: 100%;
  }
}
</style>
